<html>
	<head>
		<link href="kaoslicious.css" media="screen" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="view/js/bootstrap.js"></script>
		<script>
			function nextBtn1()
			{
			a=document.getElementById("order1");
			a.style.display = "none";
			b=document.getElementById("order2");  // Find the element
			b.style.display = "block";
			}
		</script>
		<script>
			function prevBtn2()
			{
			c=document.getElementById("order2");
			c.style.display = "none";
			d=document.getElementById("order1");  // Find the element
			d.style.display = "block";
			}
			function nextBtn2()
			{
			e=document.getElementById("order2");
			e.style.display = "none";
			f=document.getElementById("order3");  // Find the element
			f.style.display = "block";
			}
		</script>
		<script>
			function prevBtn3()
			{
			g=document.getElementById("order3");
			g.style.display = "none";
			h=document.getElementById("order2");  // Find the element
			h.style.display = "block";
			}
			function nextBtn3()
			{
			i=document.getElementById("order3");
			i.style.display = "none";
			j=document.getElementById("order4");  // Find the element
			j.style.display = "block";
			}
		</script>
		<script>
			function prevBtn4()
			{
			g=document.getElementById("order4");
			g.style.display = "none";
			h=document.getElementById("order3");  // Find the element
			h.style.display = "block";
			}
			function nextBtn4()
			{
			i=document.getElementById("order4");
			i.style.display = "none";
			j=document.getElementById("order5");  // Find the element
			j.style.display = "block";
			}
		</script>
		<script>
			function prevBtn5()
			{
			g=document.getElementById("order5");
			g.style.display = "none";
			h=document.getElementById("order4");  // Find the element
			h.style.display = "block";
			}
			function nextBtn5()
			{
			i=document.getElementById("order5");
			i.style.display = "none";
			j=document.getElementById("order6");  // Find the element
			j.style.display = "block";
			}
		</script>
		<script>
			function prevBtn6()
			{
			g=document.getElementById("order6");
			g.style.display = "none";
			h=document.getElementById("order5");  // Find the element
			h.style.display = "block";
			}
//			function nextBtn5()
//			{
//			i=document.getElementById("order6");
//			i.style.display = "none";
//			j=document.getElementById("order7");  // Find the element
//			j.style.display = "block";
//			}
		</script>
	</head>
	<body>
		<!-- Let's get started -->
		<div id="order1" style="display:block;">
			<ol class="progtrckr" data-progtrckr-steps="5">
				<li class="progtrckr-todo">Let's Get Started</li><!--
			 --><li class="progtrckr-todo">Pilih / Upload Desain</li><!--
			 --><li class="progtrckr-todo">Kustomisasi Kaos</li><!--
			 --><li class="progtrckr-todo">Info Kamu</li><!--
			 --><li class="progtrckr-todo">Bringing All Together</li>
			</ol>
			<br/><br/>
			<div style="float:right;margin-right:150px">
			<button class="btn btn-link btn-large" onclick="nextBtn1()" id="bnext1">
			NEXT
			</button>
			</div>
		</div>
		<!--  Pilih/Upload Desain -->
		<div id="order2" style="display:none;">
			<ol class="progtrckr" data-progtrckr-steps="5">
				<li class="progtrckr-done">Let's Get Started</li><!--
			 --><li class="progtrckr-todo">Pilih / Upload Desain</li><!--
			 --><li class="progtrckr-todo">Kustomisasi Kaos</li><!--
			 --><li class="progtrckr-todo">Info Kamu</li><!--
			 --><li class="progtrckr-todo">Bringing All Together</li>
			</ol>
			<br/><br/>
			<div style="float:left;margin-left:150px">
			<button class="btn btn-link btn-large" onclick="prevBtn2()" id="bprev2">
			PREV
			</button>
			</div>
			<div style="float:right;margin-right:150px">
			<button class="btn btn-link btn-large" onclick="nextBtn2()" id="bnext2">
			NEXT
			</button>
			</div>
		</div>
		<!--  Kustomisasi Kaos -->
		<div id="order3" style="display:none;">
			<ol class="progtrckr" data-progtrckr-steps="5">
				<li class="progtrckr-done">Let's Get Started</li><!--
			 --><li class="progtrckr-done">Pilih / Upload Desain</li><!--
			 --><li class="progtrckr-todo">Kustomisasi Kaos</li><!--
			 --><li class="progtrckr-todo">Info Kamu</li><!--
			 --><li class="progtrckr-todo">Bringing All Together</li>
			</ol>
			<br/><br/>
			<div style="float:left;margin-left:150px">
			<button class="btn btn-link btn-large" onclick="prevBtn3()" id="bprev3">
			PREV
			</button>
			</div>
			<div style="float:right;margin-right:150px">
			<button class="btn btn-link btn-large" onclick="nextBtn3()" id="bnext3">
			NEXT
			</button>
			</div>
		</div>
		<!--  Info Kamu -->
		<div id="order4" style="display:none;">
			<ol class="progtrckr" data-progtrckr-steps="5">
				<li class="progtrckr-done">Let's Get Started</li><!--
			 --><li class="progtrckr-done">Pilih / Upload Desain</li><!--
			 --><li class="progtrckr-done">Kustomisasi Kaos</li><!--
			 --><li class="progtrckr-todo">Info Kamu</li><!--
			 --><li class="progtrckr-todo">Bringing All Together</li>
			</ol>
			<br/><br/>
			<div style="float:left;margin-left:150px">
			<button class="btn btn-link btn-large" onclick="prevBtn4()" id="bprev4">
			PREV
			</button>
			</div>
			<div style="float:right;margin-right:150px">
			<button class="btn btn-link btn-large" onclick="nextBtn4()" id="bnext4">
			NEXT
			</button>
			</div>
		</div>
		<!--  Bringing all together -->
		<div id="order5" style="display:none;">
			<ol class="progtrckr" data-progtrckr-steps="5">
				<li class="progtrckr-done">Let's Get Started</li><!--
			 --><li class="progtrckr-done">Pilih / Upload Desain</li><!--
			 --><li class="progtrckr-done">Kustomisasi Kaos</li><!--
			 --><li class="progtrckr-done">Info Kamu</li><!--
			 --><li class="progtrckr-todo">Bringing All Together</li>
			</ol>
			<br/><br/>
			<div style="float:left;margin-left:150px">
			<button class="btn btn-link btn-large" onclick="prevBtn5()" id="bprev5">
			PREV
			</button>
			</div>
			<div style="float:right;margin-right:150px">
			<button class="btn btn-link btn-large" onclick="nextBtn5()" id="bnext5">
			NEXT
			</button>
			</div>
		</div>
		<!--  FINISH -->
		<div id="order6" style="display:none;">
			<ol class="progtrckr" data-progtrckr-steps="5">
				<li class="progtrckr-done">Let's Get Started</li><!--
			 --><li class="progtrckr-done">Pilih / Upload Desain</li><!--
			 --><li class="progtrckr-done">Kustomisasi Kaos</li><!--
			 --><li class="progtrckr-done">Info Kamu</li><!--
			 --><li class="progtrckr-done">Bringing All Together</li>
			</ol>
			<br/><br/>
			<div style="float:left;margin-left:150px">
			<button class="btn btn-link btn-large" onclick="prevBtn6()" id="bprev6">
			PREV
			</button>
			</div>
			<div style="float:right;margin-right:150px">
			<button class="btn btn-link btn-large" onclick="nextBtn6()" id="bnext6">
			FINISH
			</button>
			</div>
		</div>
		<script>
		$(window).load(function(){
			$("ol.progtrckr").each(function(){
				$(this).attr("data-progtrckr-steps", 
							 $(this).children("li").length);
			});
		})
		</script>
	</body>
</html>